<template>
    <div class="body">
        <el-row :gutter="20" v-permission="['getStatistics1,GET']">
            <template v-if="panels.length == 0">
                <el-col :span="6" v-for="i in 4" :key="i">
                    <el-skeleton loading animated>
                        <template #template>
                            <el-card shadow="hover" class="card-border-none">
                                <template #header>
                                    <div class="card-header-sk">
                                        <el-skeleton-item variant="h3" style="width: 50%"></el-skeleton-item>
                                        <el-skeleton-item variant="text" style="width: 10%"></el-skeleton-item>
                                    </div>
                                </template>
                                <span>
                                    <el-skeleton-item variant="h3" style="width: 80%"></el-skeleton-item>
                                </span>
                                <el-divider direction="horizontal"></el-divider>
                                <div class="card-header-sk">
                                    <el-skeleton-item variant="h3" style="width: 50%"></el-skeleton-item>
                                    <el-skeleton-item variant="text" style="width: 10%"></el-skeleton-item>
                                </div>
                            </el-card>
                        </template>
                    </el-skeleton>
                </el-col>
            </template>

            <el-col :span="6" v-for="(item, index) in panels" :key="index">
                <el-card shadow="hover" class="card-border-none">
                    <template #header>
                        <div class="card-header-sk">
                            <span class="card-title-span">{{ item.title }}</span>
                            <el-tag :type="item.unitColor ? item.unitColor : 'primary'" size="small" effect="plain">{{ item.unit }}</el-tag>
                        </div>
                    </template>
                    <span class="card-content-span">
                        <count-to :value="item.value"></count-to>
                    </span>
                    <el-divider direction="horizontal"></el-divider>
                    <div class="card-header-sk">
                        <span class="card-footer-span">{{ item.subTitle }}</span>
                        <span class="card-footer-span">{{ item.subValue }}{{ item.subUnit }}</span>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="20" style="margin-top: 20px">
             <el-col :span="3" v-for="(item,index) in iconNavs" :key="index">
                 <el-card shadow="hover" class="card-border-none" @click="$router.push(item.path)" style="cursor: pointer">
                     <div class="fast-router">
                        <el-icon size="16" :style="{color: item.color}">
                            <component :is="item.icon"></component>
                        </el-icon>
                        <span style="font-size: 14px;margin-top: 10px">{{ item.title }}</span>
                     </div>
                 </el-card>
             </el-col>
         </el-row>

         <el-row :gutter="20" style="margin-top: 20px">
             <el-col :span="12" v-permission="['getStatistics3,GET']">
                 <index-chart></index-chart>
             </el-col>
             <el-col :span="12" v-permission="['getStatistics2,GET']">
                 <index-card :title="card1.title" :tip="card1.tip" :btns="card1.btns"></index-card>
                 <index-card style="margin-top: 20px" :title="card2.title" :tip="card2.tip" :btns="card2.btns"></index-card>
             </el-col>
         </el-row>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { getStatistics1, getStatistics2 } from '~/api/index.js'
import CountTo from '~/components/CountTo.vue'
import IndexChart from '~/components/IndexChart.vue'
import IndexCard from '~/components/IndexCard.vue'

const panels = ref([])
getStatistics1().then(res => panels.value = res.panels)

const iconNavs = ref([
    {
        icon:"user",
        color:"#3b82f6",
        title:"用户",
        path:"/user/list"
    },
    {
        icon:"shopping-cart",
        color:"#8b5cf6",
        title:"商品",
        path:"/goods/list"
    },
    {
        icon:"tickets",
        color:"#d946ef",
        title:"订单",
        path:"/order/list"
    },
    {
        icon:"chat-dot-square",
        color:"#14b8a6",
        title:"评价",
        path:"/comment/list"
    },
    {
        icon:"picture",
        color:"#f43f5e",
        title:"图库",
        path:"/image/list"
    },
    {
        icon:"bell",
        color:"#10b981",
        title:"公告",
        path:"/notice/list"
    },
    {
        icon:"set-up",
        color:"#6b7280",
        title:"配置",
        path:"/setting/base"
    },
    {
        icon:"files",
        color:"#f59e0b",
        title:"优惠券",
        path:"/coupon/list"
    }
])
const card1 = reactive({
    title:"店铺及商品提示",
    tip:"店铺及商品提示",
    btns:[]
})

const card2 = reactive({
    title:"交易提示",
    tip:"需要立即处理的交易订单",
    btns:[]
})
getStatistics2().then(res=>{
    card1.btns = res.goods
    card2.btns = res.order
})
</script>
<style lang="scss" scoped>
.body {
    .card-border-none {
        border: none;
        .card-header-sk {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .card-title-span {
                font-size: 14px;
            }
            .card-footer-span {
                font-size: 14px;
                color: #6b7280;
            }
        }
        .card-content-span {
            font-weight: bold;
            font-size: 30px;
            color: #6b7280;
        }
        .fast-router {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>